<template>
  <view class="page">
    <Navbar title="我的资料" occupy>
      <u-icon slot="left" name="arrow-left" color="#fff" />
    </Navbar>
    <view class="f f-ac f-jb row">
      <view>个人头像</view>
      <view class="avatar">
        <u-avatar
          :src="baseUrl + userInfo.avatar"
          size="84rpx"
          mode="aspectFill"
          @click="submitImage"
        />
      </view>
    </view>
    <view class="f f-ac f-jb row">
      <view>昵称</view>
      <view class="f-1">
        <u-input
          v-model="userInfo.nickName"
          border="none"
          color="#fff"
          placeholder="点击填写"
          maxlength="20"
          input-align="right"
          suffix-icon="arrow-right"
          @confirm="confirmNickName"
          font-size="28rpx"
        />
      </view>
    </view>
  </view>
</template>

<script>
import config from "@/request/baseUrl.js";
import { commonUpload } from "@/request/common.js";
import { putNickNameAvatar } from "@/request/bindApi.js";
export default {
  data() {
    return {
      baseUrl: config.baseUrl,
      userInfo: {}, // 用户信息
    };
  },
  created() {
    this.userInfo = this.$getStorage("USER_INFO");
    this.$forceUpdate();
  },
  methods: {
    // 上传头像
    submitImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ["original"],
        sourceType: ["album", "camera"],
        success: ({ tempFilePaths }) => {
          commonUpload(tempFilePaths[0]).then((res) => {
            if (res.code == 200) {
              this.userInfo.avatar = res.fileName;
              this.updateInfo({ avatar: res.fileName });
            } else {
              uni.showToast({
                title: res.msg || "服务器错误",
                icon: "none",
                mask: true,
              });
            }
          });
        },
      });
    },
    // 修改昵称
    confirmNickName(val) {
      this.userInfo.nickName = val;
      this.updateInfo({ nickName: val });
    },
    // 修改用户信息
    updateInfo(data) {
      putNickNameAvatar(data).then((res) => {
        if (res.code == 200) {
          this.$prePage().refreshUserInfo();
        } else {
          uni.showToast({
            title: res.msg || "服务器错误",
            icon: "none",
            mask: true,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(48.31% 108.99% at 100% 1.17%, #142527 0%, #15161c 100%);
  position: relative;
  padding: 20rpx;
  .row {
    color: #fff;
    font-size: 28rpx;
    padding: 30rpx 0;
    border-bottom: 1rpx solid rgba(217, 217, 217, 0.3);
    .avatar {
      border: 4rpx solid #24de73;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;
    }
  }
}
</style>
